<template>
	<div class="servicecard-main">
		<el-row type="flex" class="servicecard-filter">
			<div class="cl-filter flex" style="width:100%">
				<span class="cl-filter__label">关键字</span>
				<cl-flex1>
					<el-input
						v-model="keyword"
						placeholder="请输入卡项名称进行搜索"
						clearable
						prefix-icon="el-icon-search"
					/>
				</cl-flex1>
				<div style="width:40%" />
			</div>
		</el-row>
		<div class="servicecard-wrap" v-loading="loading">
			<el-tabs tab-position="left" style="height:400px;" v-model="activeTab">
				<el-tab-pane
					v-for="(item, idx) in cardType"
					:key="idx"
					:label="item.label"
					:name="item.value + ''"
				>
					<keep-alive>
						<el-row
							class="servicecard-tab-pane"
							:gutter="10"
							v-if="item.list.length && activeTab == item.value"
						>
							<template v-for="(subitem, subidx) in item.list">
								<el-col
								:span="browser.isMobile?24:8"
									:key="subidx"
									v-if="subitem.sc_name.includes(keyword)"
								>
									<div
										class="flex flex-align-center mb-1 servicecard-item"
										:class="{
											active: selectIds.includes(subitem.sc_id)
										}"
										@click="itemClick(subitem)"
									>
										<cl-avatar :src="getCover(subitem)" shape="square" />
										<cl-flex1
											class="h-100 pl-1 flex-column flex-justify-center"
										>
											<div class="ellipsis2">
												{{ subitem.sc_name }}({{ subitem.card_nums }}次)
											</div>
											<!-- <div>{{ subitem.card_nums }}次</div> -->
											<div class="price">￥{{ subitem.price }}</div>
										</cl-flex1>
									</div>
								</el-col>
							</template>
						</el-row>
					</keep-alive>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div class="btns-wrap">
			<el-button @click="cancel">关闭</el-button>
			<el-button type="primary" @click="confirm" :disabled="loading">确定</el-button>
		</div>
	</div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
	name: "cl-servicecard-list",
	props: {
		value: {
			type: Array,
			default: () => []
		},
		// 升级
		upgrade: {
			type: Boolean,
			default: false
		},
		biz_id: {
			type: [Number, String],
			default: ""
		},
		//多选
		multiple: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			loading: false,
			keyword: "",
			activeTab: "4",
			selectList: [],
			cardType: [
				// { value: 1, label: "储值卡", list: [] },
				// { value: 2, label: "折扣卡", list: [] },
				{ value: 4, label: "疗程总次卡", list: [] },
				{ value: 3, label: "时段卡", list: [] }

				// { value: 5, label: "疗程分次卡", list: [] }
			]
		};
	},
	computed: {
		...mapGetters(["browser"]),
		selectIds() {
			return this.selectList.map(v => v.sc_id);
		}
	},
	watch: {
		activeTab(v) {
			this.getList(v * 1);
		}
	},
	methods: {
		init() {
			this.selectList = [...this.value];
			this.keyword = "";
			// this.activeTab = "1";
			this.getList();
		},
		async getList(sc_type = 4) {
			let currIdx = this.cardType.findIndex(v => v.value == sc_type);
			const data = await this.$service.servicecard.lists({
				biz_id: this.biz_id,
				search: "",
				status: "1",
				sc_type,
				pagedata: 0
			});
			this.cardType[currIdx].list = data;
		},
		getCover(item) {
			return item.cover || require(`@/assets/img/card/${item.sc_type || 1}.png`);
		},
		itemClick(item) {
			if (this.upgrade || !this.multiple) {
				this.selectList = [item];
				return;
			}
			let idx = this.selectIds.findIndex(v => v == item.sc_id);
			if (idx >= 0) {
				this.selectList.splice(idx, 1);
				return;
			}
			this.selectList.push(item);
		},
		cancel() {
			this.$emit("cancel");
		},
		confirm() {
			this.cancel();
			// this.$emit("input", this.selectList);
			this.$emit("confirm", this.selectList);
		}
	}
};
</script>
<style lang="scss" scoped>
.servicecard-main {
	position: relative;

	.servicecard-filter {
		padding: 10px;
		border-bottom: 1px solid $border-main;
	}
	.servicecard-wrap {
		height: 400px;
		.el-tabs__item {
			border-bottom: 1px solid $border-main;
			box-sizing: border-box;
		}
		.el-tabs__nav-wrap::after {
			width: 1px;
		}
	}

	.servicecard-tab-pane {
		padding-top: 10px;
		width: 100%;
		height: 350px;
		overflow: auto;
		border-bottom: 1px solid $border-main;
	}
	.servicecard-item {
		background: #faf9fc;
		border-radius: 3px;
		overflow: hidden;
		padding: 5px;
		height: 65px;
		box-sizing: border-box;
		cursor: pointer;
		border: 1px solid transparent;
		transition: border 0.25s ease;
		.ellipsis2 {
			height: 34px;
		}
		&.active {
			border-color: $primary;
		}
		.price {
			color: red;
		}
	}
	.btns-wrap {
		position: absolute;
		bottom: 10px;
		right: 10px;
	}
}
</style>
